<template>
	<view>
		<u-popup :show="show">
			<view class="warpper">
				
				<view class="warpper__container">
					<view class="warpper__container__item" v-for="item,index in option" @click="selectChange(item)" :key="index">
						<text>{{item[labelSigned]}}</text>
					</view>
				</view>
				<view class="warpper__header">
					<view class="warpper__header__left" >
				
					</view>
					<view class="warpper__header__title" @click="cancelHandle">
						{{$t('index.Cancel')}}
					</view>
					<view class="warpper__header__right">
						
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "SelectPopup",
		props: {
			show: {
				type: Boolean,
				default: () => false
			},

			option: {
				type: Array,
				default: () => []
			},
			value: {
				type: [String, Number],
				default: ''
			},
			labelSigned: {
				type: String,
				default: 'label'
			},
			valueSigned: {
				type: String,
				default: 'value'
			}
			
		},
		data() {
			return {
				typeValue: ''
			};
		},
		mounted() {
			this.typeValue = this.value
		},
		methods: {
			cancelHandle() {
				this.$emit('update:show', false)
			},
		
			selectChange(item) {
				this.typeValue = item[this.valueSigned]
				this.$emit('finish', this.typeValue)
				this.$emit('update:show', false)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.warpper {
		background: #F6F6F6;
		overflow: hidden;
		border-radius: 50rpx 50rpx 0px 0px;

		&__header {
			background-color: #fff;
			border-top: 10rpx solid #f7f7f7;
			display: flex;
			align-items: center;
			height: 110rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			// background: #F6F6F6;

			&__left {
				flex: 0 0 200rpx;
				padding-left: 30rpx;
				color: #878787;
			}

			&__title {
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				font-weight: 500;
				color: #878787;
			}

			&__right {
				flex: 0 0 200rpx;
				text-align: right;
				padding-right: 30rpx;
				color: #61BDB2;
			}
		}

		&__container {
			background-color: #fff;
			max-height: 750rpx;
			font-size: 30rpx;
			// padding-bottom: 50rpx;

			&__item {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 30rpx;
				height: 110rpx;
				// border-bottom: 2rpx solid #F6F6F6;

				.my-icon {
					font-size: 42rpx;
					color: #61BDB2;
				}
			}
		}
	}

	/deep/ .u-popup__content {
		background: #F6F6F6;
		border-radius: 50rpx 50rpx 0px 0px;
	}
</style>
